<template>
  <div class="table-page flex-col">
    <div class="bgfff mb-10 round-10 px-14">
      <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form mt-10">
      <a-form-item hide-label class="w-42n">
        <a-select class="w-41n" v-model="listParams.userType" placeholder="选择用户类型检索" @change="changeCurrent(1)">
          <a-option value="" label="全部"></a-option>
          <a-option v-for="item in cateList" :key="item.id" :value="item.id" :label="item.type"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="payUser" hide-label>
        <a-select
          class="w-36n"
          v-model="listParams.payUser"
          placeholder="选择打款平台"
          @change="changeCurrent(1)"
          allow-clear
        >
          <a-option value="" label="全部"></a-option>
          <a-option v-for="item in platformList" :key="item.id" :value="item.id" :label="item.name"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="payType" hide-label>
        <a-select
          class="w-34n"
          v-model="listParams.payType"
          placeholder="选择支付路径"
          @change="changeCurrent(1)"
          allow-clear
        >
          <a-option value="" label="全部"></a-option>
          <a-option :value="1" label="支付宝"></a-option>
          <a-option :value="2" label="银行卡"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="status" hide-label>
        <a-select class="w-44n" v-model="listParams.status" placeholder="选择打款状态检索" @change="changeCurrent(1)">
          <a-option value="" label="全部"></a-option>
          <a-option :value="1" label="签约中"></a-option>
          <a-option :value="2" label="签约成功"></a-option>
          <a-option :value="3" label="打款中"></a-option>
          <a-option :value="4" label="打款成功"></a-option>
          <a-option :value="20" label="签约失败"></a-option>
          <a-option :value="40" label="打款失败"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="status" hide-label>
        <ms-date2 v-model:start="listParams.startAt" v-model:end="listParams.startEnd" placeholder="选择时间检索" @dateChange="changeCurrent(1)"></ms-date2>
      </a-form-item>
      <a-form-item field="inviteCode" hide-label>
        <a-input
          class="w-78n"
          v-model="listParams.keyword"
          placeholder="输入收款姓名/手机号/身份证号/流水凭证"
          @press-enter="changeCurrent(1)"
          allow-clear
        >
        </a-input>
      </a-form-item>
      <a-form-item hide-label>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    </div>
    <div class="round-14 bgfff pt-20  pb-36 px-50 flex flex-a-c flex-j-a mb-10">
      <div class="flex-col-center">
        <span class="mb-6 textccc">打款用户数（人）</span>
        <div class="flex flex-a-c font-bold text-size-24">
          <div class="m-relative">
            <span>{{ amount.totalCount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">总</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: #43cf7c">
            <span>{{ amount.successCount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">成功</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: red">
            <span>{{ amount.failCount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">失败</span>
          </div>
        </div>
      </div>
      <div class="h-full mt-20" style="width: 2px; background: #e8e8e8"></div>
      <div class="flex-col-center">
        <span class="mb-6 textccc">打款金额（元）</span>
        <div class="flex flex-a-c font-bold text-size-24">
          <div class="m-relative">
            <span>￥{{ amount.totalAmount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">总</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: #43cf7c">
            <span>￥{{ amount.successAmount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">成功</span>
          </div>
          <span class="mx-14 textccc">/</span>
          <div class="m-relative" style="color: red">
            <span>￥{{ amount.failAmount }}</span>
            <span class="m-absolute position-center-x text-size-14 nowrap" style="bottom: -20px">失败</span>
          </div>
        </div>
      </div>
    </div>
    <div class="round-14 bgfff p-20 flex-1 flex-col">
      <div class="w-full flex-1 overflower-hidden m-relative">
        <div class="m-absolute t-0 b-0 r-0 l-0 flex">
          <GiTable
            row-key="id"
            id="internalPaymentLog"
            v-model:columns="columns"
            :loading="loading"
            :data="tableData"
            :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
            :pagination="pagination"
            @refresh="getTableData"
          >
            <template #custom-extra> </template>
            <template #user="{ record }">
              <div class="flex-col">
                <span>{{ record.name }}【{{ record.userTypeName }}】</span>
                <span>{{ record.idCard }}</span>
              </div>
            </template>
            <template #status="{ record }">
              <a-tag
                :color="
                  record.status == 1
                    ? '#165dff'
                    : record.status == 2
                    ? '#7bc616'
                    : record.status == 3
                    ? '#165dff'
                    : record.status == 4
                    ? '#00b42a'
                    : record.status == 20
                    ? '#f53f3f'
                    : record.status == 40
                    ? '#f53f3f'
                    : record.status == 41
                    ? '#b71de8'
                    : '#86909c'
                "
                >{{
                  record.status == 1
                    ? '签约中'
                    : record.status == 2
                    ? '签约成功'
                    : record.status == 3
                    ? '打款中'
                    : record.status == 4
                    ? '打款成功'
                    : record.status == 20
                    ? '签约失败'
                    : record.status == 40
                    ? '打款失败'
                    : record.status == 41
                    ? '退款成功'
                    : '--'
                }}</a-tag
              >
            </template>
            <template #money="{ record }">
              <div class="flex-col flex-j-s font-bold">
                <span>￥{{ record.amount }}</span>
                <span
                  >{{ record.payType == 1 ? '支付宝' : record.payType == 2 ? '银行卡' : '--' }} |
                  {{ record.payType == 1 ? record.alipayNo : `${record.bankName}：${record.bankCard}` }}</span
                >
              </div>
            </template>
            <template #time="{ record }">
              <div class="flex-col">
                <span>{{ record.paidAt || '--' }}</span>
              </div>
            </template>
            <template #orderSn="{ record }">
              <div class="flex-col">
                <span>流水号：{{ record.orderSn }}</span>
              </div>
            </template>
          </GiTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { usePagination } from '@/hooks'
import { reAssign, deleteEmpty, formatObject } from '@/utils/common'
import { lgLogSearch, lgLogStatics, lgCateListSelect } from '@/apis'
import { useTabsStore } from '@/store'
import { platformList } from './data'

defineOptions({ name: 'internalPaymentLog' })

useTabsStore().changeTagTitle('内部打款-打款记录')
const columns = ref([
  {
    title: '用户',
    width: 190,
    slotName: 'user'
  },
  {
    title: '打款状态',
    width: 110,
    align: 'center',
    slotName: 'status'
  },
  {
    title: '打款金额',
    width: 240,
    slotName: 'money'
  },
  {
    title: '打款时间',
    width: 180,
    slotName: 'time'
  },
  {
    title: '支付路径',
    width: 110,
    align: 'center',
    render: ({ record }) => {
      return record.payType == 1 ? '支付宝' : record.payType == 2 ? '银行卡' : '--'
    }
  },
  {
    title: '打款平台',
    width: 110,
    align: 'center',
    dataIndex: 'payAccountName'
  },
  {
    title: '打款凭证',
    width: 200,
    slotName: 'orderSn'
  },
  {
    title: '备注',
    width: 130,
    render: ({ record }) => {
      return record.resultPayDesc || '--'
    }
  }
])

const loading = ref(false)
const tableData = ref([])
const cateList = ref([])
const amount = reactive({
  failAmount: 0,
  failCount: 0,
  successAmount: 0,
  successCount: 0,
  taskCount: 0,
  totalAmount: 0,
  totalCount: 0
})
const listParams = reactive({
  userType: undefined,
  keyword: undefined,
  page: 1,
  payUser: undefined,
  payType: undefined,
  startAt:undefined,
  startEnd:undefined,
  pageSize: 15
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

const getTaskListStatisticsFun = async () => {
  const res = await lgLogStatics(deleteEmpty(listParams))
  reAssign(amount, res.data)
}

// 获取分类
const getCateList = async () => {
  const res = await lgCateListSelect({})
  cateList.value = res.data.list
}

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    getTaskListStatisticsFun()
    const res = await lgLogSearch(deleteEmpty(listParams))
    await getCateList()
    tableData.value = res.data.list.map((item) => {
      return {
        ...item,
        payAccountName: formatObject(platformList, 'id', item.payUser, 'name'),
        userTypeName: formatObject(cateList.value, 'id', item.userType, 'type')
      }
    })
    setTotal(res?.data?.meta?.pagination?.total || 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

onMounted(() => {
  changeCurrent(1)
})

// 重置筛选查询
const onResetSearch = () => {
  listParams.status = listParams.keyword = listParams.userType = listParams.payUser = listParams.payType = listParams.startAt = listParams.startEnd = undefined
  changeCurrent(1)
}
</script>

<style lang="scss" scoped>
.table-page {
  background: transparent;
}
</style>
